<template>
	<view class="lists">
		<view v-if="list.length>0" v-for="(item,index) in list" :key="index" class="list-item" @click="click(item)">
			<view class="list-item-header" v-if="timeField">{{item[timeField]}} 训练计划 已发布</view>
			<view class="list-item-bottom">
				<image :src="item[imgField]+'?imageView2/2/w/100/h/100/q/85'" mode="aspectFit" class="list-item-image"></image>
				<view class="list-item-right">
					<view class="list-item-title">{{item[titleField]}}</view>
					<view class="list-item-tips">
						<view v-if="tipsField">{{item[tipsField]}}</view>
						<view v-if="numField">{{item[numField]}}人学习</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="list.length==0" class="noList">暂无内容~</view>
	</view>
</template>

<script>
	export default {
		props:{
			list:Array,
			imgField:String,
			titleField:String,
			tipsField:String,
			numField:String,
			timeField:String,
		},
		data(){
			return{
				
			}
		},
		methods:{
			click(item){
				this.$emit('handleClick',item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lists{
		.noList{
			font-size: 24rpx;
			font-weight: 400;
			color: #7A7A7A;
			text-align: center;
			margin-top: 30rpx;
			background-color: #F5F5F5;
		}
		.list-item{
			border-bottom: 2rpx solid #f7f7f7;
		}
		.list-item-header{
			font-size: 24rpx;
			font-weight: 400;
			padding: 20rpx 0 0 20rpx;
			color: #7A7A7A;
		}
		.list-item-bottom{
			display: flex;
			height: 240rpx;
			align-items: center;
			.list-item-image{
				width: 200rpx;
				height: 200rpx;
				margin-left: 30rpx;
				flex-shrink: 0;
				background-color: #F5F5F5;
			}
			.list-item-right{
				margin-left: 40rpx;
				margin-right: 30rpx;
			}
			.list-item-title{
				width: 440rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				font-weight: bold;
				color: $uni-text-color-black;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				// margin-top: 12rpx;
			}
			.list-item-tips{
				width: 440rpx;
				height: 34rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: $uni-text-color-opblack;
				line-height: 34rpx;
				margin-top: 24rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				display: flex;
				justify-content: space-between;
			}
		}
	}
</style>